<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="content">
				<view class="custom-title">搜索</view>
			</block>
		</cu-custom>
		<view class="padding-32">
			<view class="flex align-center justify-between">
				<view class="search-content">
					<image src="https://txr001.zthj.net/static/img/search.png" class="img-32"></image>
					<input v-model="keywords" class="input-class" placeholder="搜索行业" name="input"></input>
					<image v-if="keywords" @click="closeSearch" src="https://txr001.zthj.net/static/img/searchClose.png" class="search-close"></image>
				</view>
				<view @click="search"><text class="search-text">搜索</text></view>
			</view>
			<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
			 :scroll-with-animation="true" :enable-back-to-top="true">
				<block v-for="(item,index) in list" :key="index">
					<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
						<view class="template-title">{{item.name}}</view>
						<view class="template-name" v-for="(info,k) in 3" :key="k">a材料</view>
					</view>
				</block>
			</scroll-view>
			<view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px - 50px)'}]">
				<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
					<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur"> {{item.name}}</view>
				</view>
			</view>
			<!--选择显示-->
			<view v-show="!hidden" class="indexToast">
				{{listCur}}
			</view>
			
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				hidden: true,
				listCurID: '',
				list: [],
				listCur: '',
			};
		},
		onLoad() {
			let list = [{}];
			for (let i = 0; i < 26; i++) {
				list[i] = {};
				list[i].name = String.fromCharCode(65 + i);
			}
			this.list = list;
			this.listCur = list[0];
		},
		onReady() {
			let that = this;
			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				that.boxTop = res.top
			}).exec();
			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				that.barTop = res.top
			}).exec()
		},
		methods: {
			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id].name;
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					this.listCur = that.list[num].name
				};
			},
	
			//触发全部开始选择
			tStart() {
				this.hidden = false
			},
	
			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.listCurID = this.listCur
			},
			indexSelect(e) {
				let that = this;
				let barHeight = this.barHeight;
				let list = this.list;
				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
				for (let i = 0; i < list.length; i++) {
					if (scrollY < i + 1) {
						that.listCur = list[i].name;
						that.movableY = i * 20
						return false
					}
				}
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style scoped lang="less">
	.search-content{
		width: 606rpx;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 24rpx;
		border: 2rpx solid #D9D9D9;
		display: flex;
		align-content: center;
		justify-content: start;
		align-items: center;
		padding:0 26rpx;
		.input-class{
			height: 64rpx;
			line-height: 64rpx;
			text-align: left;
			width: 100%;
			padding-left: 24rpx;
		}
		.search-close{
			width: 28rpx;
			height: 28rpx;
		}
	}
	.search-text{
		font-size: 28rpx;
		font-weight: 400;
		color: #010101;
		border-bottom: 2rpx solid #010101;
	}
	.indexes {
		position: relative;
	}
	
	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}
	
	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}
	
	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}
	
	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}
	
	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}
	
	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
	.template-name{
		padding: 32rpx 0;
		font-size: 32rpx;
		font-weight: 400;
		color: #010101;
		border-bottom: 2rpx solid #D9D9D9;;
	}
	.template-title{
		padding: 48rpx 0 16rpx;
		font-size: 40rpx;
		font-weight: 400;
		color: #010101;
		border-bottom: 2rpx solid #767879;
	}
</style>